<template>
	<view class="main" style="background-color: #e4ecf7;min-height: 100vh;height: 700rpx;">
		<view class="ww">
			<u-swiper :list="list1" @change="change" @click="click" class="lunbotu"></u-swiper>
		</view>
		<view class="user_amount_box">
			<view class="user_level">
				<image class="icon" src="../../static/user/level_icon.png"></image>
				<view class="level_desc_box">
					<view class="desc">
					</view>
				</view>
				<image class="right_icon" src="../../static/user/right.png" mode=""></image>
			</view>
			<view class="amount_box">
				<view class="now_with" @click="jinjitongzhi">
					<uni-section title="公告" subTitle="" type="line" class="gonggao">
						<uni-notice-bar show-icon scrollable :text="xinxi" />
					</uni-section>
				</view>
			</view>
		</view>
		<view class="user_tab_box">
			<view class="tab_title">
				常用服务
			</view>
			<view class="tab_list_box">
				<view class="list_item" @click="life">
					<image class="icon" src="../../static/user/tab_icon/amount.png" mode=""></image>
					<view class="text">生活缴费</view>
				</view>
				<view class="list_item" @click="weixiu">
					<image class="icon" src="../../static/user/tab_icon/xieyi.png" mode=""></image>
					<view class="text">维修上报</view>
				</view>
				<view class="list_item" @click="fangke">
					<image class="icon" src="../../static/user/tab_icon/account.png" mode=""></image>
					<view class="text">访客邀请</view>
				</view>
			</view>
		</view>
		<view class="loan_box">
			<view class="loan_title_box">
				<view class="title">
					社区活动
				</view>
				<view class="link" @click="seeall">
					查看更多
				</view>
			</view>
			<view class="loan_list">
				<view class="list_item" v-for="(item,index) in productList" :key="index">
					<view class="item_head" @click="cf(item)">
						<view>
							<image class="pic" src="../../static/OIP-C.jpg" mode=""></image>
						</view>
						<view class="bottom_item">
							<view>
								<text class="c1">{{item.theTheme}}</text>
							</view>
							<view>
								<text class="c1">{{item.theAuthor}} {{item.createTime | formatDate}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot_line">
			<view class="line"></view>
			<text style="margin: 0 20rpx;font-size: 28rpx;">我的也有底线的</text>
			<view class="line"></view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

				uu: [],
				xinxi: "",
				productList: [],
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		onLoad() {
			// 查看所有公告
			this.see()
		},
		//时间戳的处理    
		filters: {
			formatDate: function(value) {
				var date = new Date(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
		},
		methods: {
			weixiu() {
				uni.navigateTo({
					url: './maintenancereport/jianxiu'
				})
			},
			// 紧急通知详情
			jinjitongzhi() {
				uni.navigateTo({
					url: `./activities/xiangqing?item=${encodeURIComponent(JSON.stringify(this.uu))}`,
				})
			},
			//查看活动详情
			cf(item) {
				uni.navigateTo({
					url: `./activities/activitiesxiangqing?item=${encodeURIComponent(JSON.stringify(item))}`,
				})
			},
			// 查看所有社区活动
			seeall() {
				uni.navigateTo({
					url: './activities/activities',
				})
			},
			// 访客邀请
			fangke() {
				uni.navigateTo({
					url: './example/invitation'
				})
			},
			//查看所有社区活动
			see() {
				this.$axios({
					url: '/systemuser/announcement/getAnnouncement',
					data: {
						id: 1,
					},
					method: 'GET',
					success: (res) => {
						if (res.data.success == true) {
							this.productList = res.data.data.list
							const aa = res.data.data.list
							const bb = []
							if (aa != null) {
								for (var i = 0; i < aa.length; i++) {
									if (aa[i].type === "非常紧急") {
										bb.push(aa[i])
										this.xinxi = aa[i].content
									}
								}
							}
							this.uu = bb
						}
					}
				})
			},
			//生活缴费
			life() {
				uni.navigateTo({
					url: './stylepay/livingexpenses/livingexpenses'
				})
			},
			getMore() {
				uni.showToast({
					title: '点击查看更多',
					icon: 'none'
				})
			},
			change() {

			},
			click() {

			}

		}
	}
</script>

<style lang="scss" scoped>
	.ww {

	}

	.c1 {
		margin-left: 20rpx;
	}

	.lunbotu {
		height: 200rpx;
	}

	.container {
		/* #ifndef APP-NVUE */
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		/* #endif */
	}

	.gonggao {
		width: 500rpx;
	}

	.user_header_box {
		height: 340rpx;
		width: 100%;
		background-image: url(../../static/user/head_bg.png);
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: left;

		.avatar_box {
			margin-left: 80rpx;

			.img {
				height: 120rpx;
				width: 120rpx;
			}
		}

		.user_info {
			color: #fff;
			margin-left: 20rpx;

			.name {}

			.uid {}
		}
	}

	.user_amount_box {
		width: 90%;
		margin: -90rpx auto 0 auto;

		.user_level {
			border-radius: 10rpx 10rpx 0 0;
			background-color: #e2eefe;
			padding: 10rpx 14rpx;
			display: flex;
			align-items: center;

			.icon {
				height: 60rpx;
				width: 60rpx;
			}

			.level_desc_box {
				margin-left: 20rpx;

				.title {
					font-size: 28rpx;
				}

				.desc {
					font-size: 20rpx;
					color: #808080;
				}
			}

			.right_icon {
				height: 26rpx;
				width: 16rpx;
				margin-left: auto;
				padding-right: 10rpx;
			}
		}

		.amount_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 0 0 10rpx 10rpx;
			padding: 40rpx 60rpx;
			margin-top: 20rpx;

			.amount {
				font-size: 46rpx;
			}
			.now_with {
				background-color: #ffa415;
				color: #fff;
				padding: 0rpx 15rpx;
				border-radius: 5rpx;
			}
		}
	}

	.user_tab_box {
		background-color: #fff;
		width: 90%;
		margin: 20rpx auto;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;

		.tab_title {
			font-size: 30rpx;
		}

		.tab_list_box {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.list_item {
				width: 25%;
				text-align: center;
				margin: 16rpx 0;

				.icon {
					height: 80rpx;
					width: 80rpx;
				}

				.text {
					color: #666666;
					margin-top: -10rpx;
					font-size: 26rpx;
				}
			}
		}
	}

	.loan_box {
		background-color: #fff;
		width: 90%;
		margin: 20rpx auto;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		box-shadow: 5px 5px 10px 5px #c5c5c5;
		padding-bottom: 20rpx;
		box-sizing: border-box;

		.loan_title_box {
			display: flex;
			align-items: center;
			padding-top: 6rpx;

			.title {
				font-size: 30rpx;
			}

			.link {
				margin-left: auto;
				color: #797979;
				font-size: 20rpx;
			}
		}

		.loan_list {
			margin-top: 30rpx;

			.list_item {
				padding: 0 10rpx;
				border-bottom: 1px solid #e9e9e9;
				margin-top: 20rpx;

				.item_head {
					display: flex;
					align-items: center;

					.pic {
						height: 150rpx;
						width: 150rpx;
					}

					.loan_info {
						margin-left: 20rpx;

						.name {
							color: #797979;
							font-weight: 600;
						}

						.date {
							color: #797979;
							margin-top: 6rpx;
						}
					}

					.join_btn {
						background-color: #2979ff;
						color: #fff;
						margin-left: auto;
						margin-right: 20rpx;
						padding: 6rpx 30rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
					}
				}

				.item_bottom {
					display: flex;
					margin-top: 20rpx;
					padding-bottom: 14rpx;
					width: 100%;

					.bottom_item {
						margin-left: 100rpx;
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: center;
						font-size: 26rpx;
						text-align: right;
						padding-left: 300rpx;

						.names {
							color: #797979;
						}

						.amount {
							color: #ff0548;
							margin-top: 6rpx;
							font-weight: 600;
						}
					}
				}
			}
		}
	}

	.foot_line {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 20rpx;
		color: #5f5f5f;

		.line {
			width: 200rpx;
			border-bottom: 1px solid #5f5f5f;
		}
	}
</style>
